<!DOCTYPE HTML>
<html>
<head>
    <title>属性管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../assets/css/my-code.css">
    <link href="../assets/css/common-style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../assets/js/bui-min.js"></script>
    <script type="text/javascript" src="../assets/js/config-min.js"></script>
    <script src="../assets/js/my.js"></script>
</head>
<body>
<div class="container">
    <ul class="head-nav">
        <li class="active">设备</li>
        <li>安装材料</li>
    </ul>
    <div class="search-mes">
        <div class="row">
            <div class="span7" style="margin-left: 0">
                <div class="panel">
                    <div class="panel-header clearfix" style="background: #eaf1f9">
                        <h3 class="pull-left">双击编辑树</h3>
                        <div id="tbar" class="pull-right"></div>
                    </div>
                    <div class="panel-body" id= "t1">
                    </div>
                </div>

            </div>
            <div class="span21" style="margin-left: 28px">
                <p class="other_btn">
                    <button id="btnAdd" class="button-primary">添加</button>
                </p>
                <div id="g1" style="margin-top: 10px"></div>
                <div class="row">
                    <div class="" style="width:100%">
                        <div id="bar">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="content" class="hide">
        <form class="form-horizontal">
            <div class="row">
                <div class="control-group span15">
                    <label class="control-label">名称：</label>
                    <div class="controls">
                        <input name="a" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
                <div class="control-group span15">
                    <label class="control-label">顺序号：</label>
                    <div class="controls">
                        <input name="b" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span15 ">
                    <label class="control-label">显示方式：</label>
                    <div class="controls">
                        <input name="c" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div id="add_attr" class="hide">
        <form class="form-horizontal">
            <div class="row">
                <div class="control-group span15">
                    <label class="control-label">名称：</label>
                    <div class="controls">
                        <input name="a" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
                <div class="control-group span15">
                    <label class="control-label">顺序号：</label>
                    <div class="controls">
                        <input name="b" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span15 ">
                    <label class="control-label">显示方式：</label>
                    <div class="controls">
                        <input name="c" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
<script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script>

<script type="text/javascript">
    BUI.use('common/page');
    BUI.use(['bui/tree','bui/data','bui/toolbar','bui/editor','bui/grid','bui/select'],function (Tree,Data,Toolbar,Editor,Grid,Select) {
        var NumerPBar = Toolbar.NumberPagingBar;
        var store = new Data.TreeStore({
            root : {
                id : '0',
                text : '系统代码',
                checked : false
            },
            pidField : 'id',
            url : '../data/attributeTreeData.json',
            autoLoad : true
        });

        var tree = new Tree.TreeList({
            render : '#t1',
            showLine : true,
            height:400,
            store : store,
            checkType : 'all',
            showRoot : true
        });
        tree.render();
        var isAddRemote = false,
            editing = new Grid.Plugins.DialogEditing({
                contentId : 'content', //设置隐藏的Dialog内容
                triggerCls : 'btn-edit', //触发显示Dialog的样式
                editor : {
                    title : '编辑属性',
                    width : 430,
                    listeners : {
                        show : function(){
                            var form = this.get('form');
                            if(!isAddRemote){
                                var bField = form.getField('b');
                                bField.set('remote',{
                                    url : '../data/attributeData.json',
                                    dataType:'json',//默认为字符串
                                    callback : function(data){
                                        if(data.success){
                                            return '';
                                        }else{
                                            return data.msg;
                                        }
                                    }
                                });
                                isAddRemote = true;
                            }
                            //TO DO
                        }
                    }
                }
            });
        var store = new Data.Store({
                url : '../data/attributeData.json',
                pageSize : 8,
                autoLoad:true, //自动加载数据
                params : { //配置初始请求的参数
                    a : 'a',
                    b : 'b',
                    c : 'c'
                }
            }),
            columns = [
                {title : '名称',dataIndex :'a',width:200},
                {title : '顺序号',dataIndex :'b',width:200},
                {title : '显示方式',dataIndex :'c',width:100},
                {
                    title: '操作',
                    renderer : function(){
                        return '<span class="grid-command btn-edit">编辑</span>'
                    }
                }
            ],
            grid = new Grid.Grid({
                render:'#g1',
                columns : columns,
                height:'auto',
                forceFit : true,
                loadMask: true,
                store: store,
                plugins: [BUI.Grid.Plugins.ColumnChecked, BUI.Grid.Plugins.AutoFit, BUI.Grid.Plugins.ColumnResize,Grid.Plugins.RowNumber,editing] // 插件形式引入多选表格
            });
        grid.render();
        bar = new NumerPBar({
            render : '#bar',
            autoRender: true,
            elCls : 'pagination',
            store : store,
            prevText:'上一页',
            nextText:'上一页'
        });


        tree.on('itemclick',function(ev){
            var item = ev.item;
            $('.log').text(item.text);
        });
        var store = tree.get('store'),
            editor = new Editor.Editor({
                field : { //设置编辑的字段
                    rules : {
                        required : true
                    }
                },
                autoUpdate : false, //不自动更新对应DOM的文本，而使用store更新数据
                changeSourceEvent : null
            });
        editor.render();

        editor.on('accept',function(){
            var text = editor.getValue(),
                node = editor.get('curNode');
            node.text = text;
            store.update(node);
        });

        //显示编辑器
        function showEditor(node){
            var element = tree.findElement(node);
            editor.setValue(node.text);

            editor.set('curNode',node); //缓存当前编辑的记录
            editor.set('align',{ //设置对齐
                node : $(element).find('.x-tree-icon-wraper'),
                points : ['tr','tl']
            });
            editor.show();
            editor.focus(); //获取焦点

        }
        //双击编辑
        tree.on('itemdblclick',function(ev){
            var node = ev.item;
            showEditor(node);
        });

        var bar = new Toolbar.Bar({
            render : '#tbar',
            elCls : 'button-group',
            children : [
                {

                    elCls : 'button button-primary marginR',
                    content : '新建',
                    handler : function(){
                        var selectedNode = tree.getSelected(),
                            newNode = {text : '新增节点'};
                        newNode = store.add(newNode,selectedNode);
                        tree.expandNode(selectedNode);
                        showEditor(newNode);
                    }
                },
                {

                    elCls : 'button button-danger marginR',
                    content : '删除',
                    handler : function(){
                        var selectedNode = tree.getSelected();
                        if(selectedNode){
                            store.remove(selectedNode);
                        }

                    }
                }
            ]
        });
        bar.render();

        var editors = new Editor.DialogEditor({
            contentId:'add_attr',
            width : 430,
            mask : true,
            title : '新建属性',
            success : function(){
                this.accept();
            }
        });

        editors.render();

        //添加新纪录
        $('#btnAdd').on('click',function(){
            editors.show();
//            var obj = {'text' : '新建记录',value : ''};
//            list.addItem(obj);
//            list.setSelected(obj);
//            editItem(obj);
        });
        var firstLeaf = tree.findNode('1111'); //获取第一个叶子节点
        tree.setSelected(firstLeaf);
//        tree.on('selectedchange',function(ev){
//            var node = ev.item;
//            if(node.leaf){ //只有点击叶子节点才能加载Grid
//                //加载对应的数据，同时将分页回复到第一页
//                store.load({id : node.id,start : 0});
//            }
//        });
    });
</script>
</html>